<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>左栏弹出效果</title>
		<style>
			/* 结合实际html结构--通配【合理】*/
			*{  
				font: 16px "微软雅黑";
				/* 去掉内外边距 */
				margin: 0;
				padding: 0;
				/* 无序列表：有样式---去一个样式 */
				list-style-type: none;
				/* 无序列表：有样式---去全部样式：list-style-type 去列表样式
				                               list-style-position 去列表项标记位置样式
											   list-style-image 去列表项图片标记样式
											   */
				list-style: none;
				
			}
			/* 左栏效果
			 1.左栏空间区域 【aside】 235*450  背景颜色自定
			 2.左栏区域内容【li】 加权 235*50 相对定位--挂靠点【固定位置】
			 3.给每个区域内容【li】 加鼠标移动上去改背景颜色
			 4.左栏弹出框：400*450  1像素边框  绝对定位-钩子微调
			 */
			aside{
				width: 265px;
				height: 530px;
				background: #ababab;
				margin: 20px 50px;
			}
			aside ul.sidebar li{
				width: 235px;
				height: 50px;
				/* 相对定位--挂靠点 */
				position: relative;
				text-align: left;
				line-height: 50px;
				top: 15px;
				/* 内边距：宽度增加 */
				padding-left: 30px;
				
			}
			aside ul.sidebar li:hover{
				background: #eee;
			}
			aside ul.sidebar div.out{
				width: 400px;
				height: 450px;
			    border: 1px solid red;
				position: absolute;
				/* 挂靠位：绝对定位：按照相对定位基点开始定位 */
				left: 285px;
				/* 显示与隐藏  javaScript【JQuery框架】 */
				display: none;
			}
			
			/* 新增样式 */
			aside ul.sidebar li span{
				border: 1px solid red;
				po sition: absolute;
				le ft: 210px;
				/* 方法之一 */
			   float: right;
			   /* 间隙：内边距*/
			   padding-right: 50px;
			}
			
		</style>
		<script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<!-- html结构 结构化标记【语义化标签】  
		 aside元素 针对：左栏、广告、弹出效果...有利于SEO优化
		    之前版本通过div+id起别名方式【缺点：繁琐、定义起名、冗余】
		-->
			<aside>
				<ul class="sidebar">
					<!-- 弹出框 -->
					<div class="out"></div>
					<li>手机 平板 电话卡<span>></span></li>
					<li>电视 盒子<span>></span></li>
					<li>路由器 智能硬件<span>></span></li>
					<li>移动电源 插线板<span>></span></li>
					<li>耳机 音箱<span>></span></li>
					<li>电池 储存卡<span>></span></li>
					<li>保护套 后盖<span>></span></li>
					<li>贴膜 其他配件<span>></span></li>
					<li>米兔 服装<span>></span></li>
					<li>箱包 其他周边<span>></span></li>
				</ul>
			</aside>
			<script>
			//左栏弹出与隐藏 .hover事件源+css函数
			//选择器： li
			$("aside ul.sidebar li").hover(function(){
				//弹出框默认：隐藏---hover悬停第一件事：显示 
				$('aside ul.sidebar div.out').css("display","block");
			},function(){
				$('aside ul.sidebar div.out').css("display","none");
			});
			</script>
	</body>
</html>



<!-- 事件源  .hover()  切换效果与css悬停hover一致
                       语法：.hover(function(){},function(){})
					   
					   
					   -->